<template>
  <div class="information">
    <div class="title_info">
      <div class="info_1"></div>
      <div class="info_2">我的积分</div>
      <img
        @click="openAgreement"
        class="info_3"
        src="../../../assets/my/17.png"
        alt=""
      />
      <div class="info_4" @click="goDetails">积分明细</div>
    </div>
    <div class="expert" v-loading="loading">
      <div class="le">
        <div class="le_tip">
          <span class="tip_num">{{ levelInfo.now_level_score }}</span>
          <span>/{{levelInfo.next_level_score}}，还需获得{{levelInfo.score_short}}积分即可升级</span>
        </div>
        <div class="le_schedule">
          <img v-if="levelInfo.now_dengjitubiao" :src="levelInfo.now_dengjitubiao" alt="" />
          <div class="progress">
            <el-progress :show-text="false" :percentage="((levelInfo.now_level_score / levelInfo.next_level_score) * 100).toFixed(0)" color="#1F52AE" />
          </div>
          <img :src="levelInfo.next_dengjitubiao" alt="" />
        </div>
        <div class="le_person" v-if="levelInfo.now_dengjitubiao">
          <img :src="levelInfo.now_dengjitubiao" alt="" />
          <div>{{ levelInfo.next_dengjimingcheng }}</div>
        </div>
      </div>
      <div class="ri">
        <div class="ri_title">
          <span>未达到的成就 {{ get_num }}</span>
          <span class="ri_title_1">/{{ total_num }}</span>
        </div>
        <div class="ri_list">
          <el-scrollbar>
            <div
              class="ri_item"
              v-for="(item, index) in achievementList"
              :key="index"
            >
              <img :class="item.is_get == 0 ? 'grey' : ''" :src="item.dengjitubiao" alt="" />
              <div>{{ item.dengjimingcheng }}</div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>

  <viewAgreement ref="agreement" :score="7"></viewAgreement>
</template>
  
  <script name="myPoints" setup>
import { post662605b3d62ec, post66260914d79f1 } from "@/utils/api.js";
import viewAgreement from "@/components/viewAgreement.vue";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
// 上一页
function navigateBack() {
  window.history.length > 1 ? router.go(-1) : router.push("/");
}

onMounted(() => {
  getData();
  getUserLevel();
});

// 查询当前用户等级
let levelInfo = ref({});
function getUserLevel() {
  post66260914d79f1({

  }).then(res => {
    // console.log(res);
    if (res.code == 1) {
      levelInfo.value = res.data;
    }
  }).catch(err => {
    console.log(err);
  })
}

let loading = ref(true);
let get_num = ref(0);
let total_num = ref(0);

let achievementList = reactive([]);
function getData() {
  post662605b3d62ec()
    .then((res) => {
      // console.log(res);
      loading.value = false;
      if (res.code == 1) {
        get_num.value = res.data.get_num;
        total_num.value = res.data.total_num;
        achievementList = Object.assign(achievementList, res.data.list);
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

let agreement = ref(null);
function openAgreement() {
  agreement.value.openPopup();
}

function goDetails() {
  router.push({
    path: "/MyPoints/pointsDetails",
  });
}
</script>
  
  <style lang="scss" scoped>
.information {
  margin-bottom: 24px;
  padding: 18px 16px;
  background: #fff;
  min-height: 486px;

  .title_info {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 0 12px 0;
    .info_1 {
      width: 2px;
      height: 10px;
      background: #1f52ae;
    }
    .info_2 {
      font-size: 10px;
      font-weight: 500;
      margin-left: 6px;
    }
    .info_3 {
      width: 8px;
      height: 8px;
      margin-left: 6px;
      cursor: pointer;
    }
    .info_4 {
      width: 60px;
      height: 20px;
      background: #1f52ae;
      border-radius: 3px;
      font-size: 8px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 0 0 auto;
      cursor: pointer;
    }
  }
  .expert {
    background: #f6f7f9;
    padding: 24px 28px;
    margin: 13px 0 0;
    display: flex;
    justify-content: space-between;
    .le {
      width: 48%;
      padding-right: 8px;
      .le_tip {
        text-align: center;
        font-size: 9px;
        color: #666;
        .tip_num {
          color: #ec695a;
        }
      }
      .le_schedule {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 22px;
          height: 22px;
          object-fit: cover;
        }
        .progress {
          width: 168px;
          height: 3px;
          margin: 0 8px;
        }
      }
      .le_person {
        text-align: center;
        margin-top: 55px;
        font-size: 14px;
        font-weight: 500;
        img {
          width: 110px;
          height: 110px;
          margin-bottom: 15px;
          object-fit: cover;
        }
      }
    }
    .ri {
      width: 48%;
      text-align: center;
      padding-left: 16px;
      .ri_title {
        font-size: 9px;
        font-weight: 500;
        margin-bottom: 16px;
        .ri_title_1 {
          color: #999;
        }
      }
      .ri_list {
        overflow: hidden;
        height: 245px;
        .ri_item {
          float: left;
          width: 62px;
          height: 77px;
          background: #fff;
          padding: 6px;
          font-size: 8px;
          font-weight: 500;
          margin: 0 7px 7px 0;
          img {
            width: 50px;
            height: 50px;
            margin-bottom: 1px;
            object-fit: cover;
          }
        }
      }
    }
  }
}
.grey {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  _filter: none;
}
</style>